<template>
	<view class="check">
		<view class="stepitem">
		  <view class="common_textarea">
			<view class="common_textarea_tit">接口介绍</view>
			<view class="common_textarea_content">小程序在用户充分授权下可获取用户云闪付注册手机号、实名或绑卡等信息，开发者需通过 UPButton 唤起用户授权组件，用户同意授权后，可通过服务端API获取相应授权权限下的用户信息。</view>
		  </view>
		</view>
		<view class="stepitem">
			<view class="row1">
				<view class="left1">功能示例</view>
			</view>
			
			<form id="form" @submit="formSubmit">
				<view
					class="itemcol clearFix"
					style="border-bottom:1px solid #f5f5f5;"
				>
					<view class="left">scope<br/></view>
					<view class="inp">
						<input
							type="text"
							placeholder="scope"
							v-model="scope"
						/>
					</view>
				</view>
			</form>
			
	        <view class="button">
				<UPButton class="submit"
					@click="btnClick"
					:scope="scope"
					>
					授权button
				</UPButton>
	        </view>
	    </view>
		
		<view class="SampleCode clearFix">
			<view class="SampleCode_tit clearFix">
				<view class="demoCode">Code值</view>
			</view>
			<view id="code" class="SampleCode_content">{{program}}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
		    scope : "scope.mobile",
		    program : "",
		};
	},
	
	mounted:function(){
		this.createcode()
	},

	methods: {
		createcode(){
		  upsdk.pluginReady (function(){
			upsdk.setTitleStyle({
			  backBtnVisible : 1, // 可选，左侧返回按钮是否显示。'0'不显示，'1'显示，不传或空则默认显示
			});
		  });
		},
		//验证code
		btnClick(result) {
			this.program = result.code
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #EEE;
}
.check {
    margin: auto;
}
    .col {
      width: 100%;
      margin: auto;
      margin-top: 31px;
      font-size: 15px;
      color: #333;
    }
    .common_title {
      width: 90.4%;
      margin: auto;
      margin-bottom: 12px;
      font-size: 0.4rem;
      color: #333;
    }
    .common_textarea {
      width: 100%;
      overflow: hidden;
      margin-bottom: 12px;
    }
	.common_textarea_tit {
	  font-size: 15px;
	  // line-height: 15px;
	  color: #333333;
	}
	.common_textarea_content {
	  font-size: 13px;
	  color: #666;
	  margin-top: 12px;
	}
    .stepitem {
      background: #fff;
      width: 90%;
      margin: 10px auto;
      border-radius: 12px;
      border: 1px solid #f5f5f5;
      box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.06);
      padding: 24px 18px 20px 18px;
      .row1 {
        width: 100%;
		margin-bottom: 10px;
        .left1 {
          font-size: 15px;
          color: #333;
        }
      }
	  .left {
	    float: left;
	    width: 30%;
		font-size:14px;
		line-height: 22.4px;
	  }
      #form {
        background: #fff;
        width: 100%;
        margin: auto;
        margin-top: 13px;
        border-radius: 12px;
        .itemcol {
          width: 303px;
          // height: 200px;
          line-height: 52px;
          font-size: 14px;
          color: #333;
          overflow: hidden;
          .inp {
            float: left;
            width: 165px;
            text-overflow: ellipsis;
            input {
              width: 100%;
              height: 25px;
              line-height:normal;
              border: 0;
              outline: none;
              font-size: 14px;
              color: #666;
            }
            .select {
              width: 165px;
              border: 0;
              outline: none;
              font-size: 14px;
              color: #666;
            }
          }
        }
      }
      .button {
        width: 100%;
        margin: 24px 0;
		text-align: center;
        .submit {
			width: 100px;
			height: 40px;
			background-color: #0081FF;
			color:#FFFFFF;
			font-size: 16px;
			border:none;
			border-radius: 4px;
        }
      }
    }
    //解析报文
    .SampleCode {
      width: 90%;
      margin: 0 auto;
      background: #fff;
      border-radius: 12px;
      margin-bottom: 18px;
      box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.06);
      font-size: 14px;
      padding: 0 18px 0 18px;
      color: #666;
      white-space: pre-wrap;
      word-wrap: break-word;
      .SampleCode_tit {
        height: 45px;
        line-height: 45px;
        .demoCode {
          float: left;
          font-size: 15px;
          color: #666;
        }
      }
      .SampleCode_content {
        padding-bottom: 20px;
        width: 100%;
        overflow: hidden;
        line-height: 21px;
      }
    }
</style>
